<template>
    <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
        <el-card>
            <span style="font-size: 13px">项目编号：</span>
            <el-input  v-model="search.projectCode" placeholder="输入内容" style="width: 130px"></el-input>
            <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
            <el-input  v-model="search.projectName" placeholder="输入内容" style="width: 130px"></el-input>
            <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
            <el-select v-model="search.purchaseCategoryId"  placeholder="请选择" style="width: 130px">
                <el-option label="货物类" value="1"></el-option>
                <el-option label="服务类" value="2"></el-option>
                <el-option label="工程类" value="3"></el-option>
            </el-select>
            <span style="font-size: 13px;margin-left: 3%">资格条件审批状态：</span>
            <el-select v-model="search.quaApproveStatus"  placeholder="请选择" style="width: 130px">
                <el-option label="未审批" value="未审批"></el-option>
                <el-option label="审批通过" value="审批通过"></el-option>
                <el-option label="已退回" value="已退回"></el-option>
            </el-select>
            <div style="display: inline;margin-left: 5%">
                <el-button  size="mini" type="primary" @click="searchConditon">查询</el-button>
                <el-button size="mini" @click="clearMes">清空查询</el-button>
            </div>
        </el-card>

        <div style="margin-top: 7px;margin-bottom: 10px">
            <el-table
                    :data="itemTable"
                    border
                    :max-height="tableHeight"
                    style="width: 100%">
                <el-table-column
                        prop="projectCode"
                        min-width="30px"
                        label="项目编号"
                >
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        min-width="40px"
                        label="项目名称"
                >
                </el-table-column>
                <el-table-column
                        prop="purchaseCategoryId"
                        min-width="30px"
                        label="采购类别"
                >
                    <template slot-scope="scope">
                        <!-- 根据采购类别的值显示不同文本 -->
                        <span v-if="scope.row.purchaseCategoryId === 1">货物类</span>
                        <span v-else-if="scope.row.purchaseCategoryId === 2">服务类</span>
                        <span v-else-if="scope.row.purchaseCategoryId === 3">工程类</span>
                        <span v-else>其他采购类别</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="purchaseMethod"
                        min-width="30px"
                        label="采购方式"
                >
                </el-table-column>
                <el-table-column
                        prop="budget"
                        min-width="30px"
                        label="预算金额(元)">
                </el-table-column>
                <el-table-column
                        prop="qualificationApproval"
                        width="140px"
                        label="资格条件审批状态"
                >
                    <template v-if="scope.row.quaSubmitStatus!==null && scope.row.quaApproveStatus !== null" slot-scope="scope">
                        <!-- 获取每一行的quaSubmitStatus和quaApproveStatus -->
                        <span>{{ scope.row.quaApproveStatus }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="quaApproveTime"
                        width="150px"
                        label="审批通过时间"
                >
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        width="150px"
                        label="创建时间"
                >
                </el-table-column>
                <el-table-column
                        prop="controls"
                        width="170px"
                        label="操作"
                >
                    <template slot-scope="{$index,row}">
                        <i  title="供应商资格审批" @click="goToApprovalManagement(row)" style="color: dodgerblue;cursor: pointer">项目管理</i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="theData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--分页-->
        <!--        <pagination :total="total"-->
        <!--                    style="float: right;margin-top: -.7%"-->
        <!--                    v-show="!showPageSearch"-->
        <!--                    :current-page="theData.page"-->
        <!--                    :page-size="theData.pageSize"-->
        <!--                    @currentChange="getGetItemSizeCurr"-->
        <!--                    @editPagesizes="getGetItemSize"/>-->
        <!--        <pagination :total="total"-->
        <!--                    style="float: right;margin-top: .7%"-->
        <!--                    v-show="showPageSearch"-->
        <!--                    :current-page="theData.page"-->
        <!--                    :page-size="theData.pageSize"-->
        <!--                    @currentChange="getGetItemSizeCurrChange"-->
        <!--                    @editPagesizes="getGetItemSizeChange"/>-->
    </div>
</template>

<script>
    import {
        projectApprove,
        projectUnapproved,
        reqApproveGet,
        reqQuaConditionSer,
        reqProjectList,
        reqPurchaseList, reqApproveSubmit
    } from "@/api/purchaseItemManage";

    export default {
        name: "index",
        data(){
            return{
                search:{
                    projectCode:'',
                    projectName:'',
                    purchaseCategoryId:'',
                    quaApproveStatus:''
                },
                theData:{
                    page: 1,
                    pageSize: 20,
                },
                currentPage: 1,
                showPageSearch: false,
                loading:true,
                total: 0,
                itemTable:[],
                pageflag: true,
                tableHeight: 200,
            }
        },
        mounted() {
            this.getAllProjects()
        },
        created() {
            this.tableHeight = window.innerHeight - 350;
        },
        methods: {
            //获取项目列表
            async getAllProjects() {
                let res = await reqProjectList()
                if(res.data.code===200){
                    this.itemTable = res.data.data.records.map(item => {
                        return { ...item, projectId: item.projectId };
                    });
                    this.total = res.data.data.total;
                }else {
                    this.$message.error(res.data.msg);
                }
            },


            //查询
            async searchConditon() {
                this.loading = true
                let theDatas = {
                    pageSize:this.theData.pageSize,
                    page:this.theData.page,
                    projectCode:this.search.projectCode,
                    projectName:this.search.projectName || '',
                    purchaseCategoryId:this.search.purchaseCategoryId,
                    quaApproveStatus:this.search.quaApproveStatus
                }
                let pageInfo = this.currentPage + "/" + this.theData.pageSize
                let res = await reqQuaConditionSer(pageInfo,theDatas)
                this.showPageSearch=true
                if (res) {
                    this.loading = false
                }
                if(res.data.code===200){
                    this.itemTable = res.data.data.record;
                    this.total=res.data.data.total
                }else {
                    this.itemTable = [];
                    this.total = 0;
                    this.$message(res.data.msg);
                };
              this.pageflag = false;
            },
            clearMes(){
                this.showPageSearch=false
                Object.keys(this.search).forEach(index=>this.search[index]='')
            },
            handleSizeChange(val) {
              this.theData.pageSize = val
              this.searchConditon()

            },
            handleCurrentChange(val) {
              this.currentPage = val
              this.pageflag = true
              this.searchConditon()
            },

            //跳转到项目管理
            goToApprovalManagement(row) {
                this.$router.push({
                    name: 'approvalItemManage',
                    params: {
                        projectId: row.projectId,
                        projectCode: row.projectCode,
                        projectName: row.projectName,
                        purchaseCategoryId: row.purchaseCategoryId,
                        budget: row.budget,
                    },
                });
            },
        }
    }
</script>

<style scoped>
    .ellipses-container {
        width: 150px; /* 设置容器宽度 */
        white-space: nowrap; /* 防止内容换行 */
        overflow: hidden; /* 隐藏超出容器宽度的部分 */
        text-overflow: ellipsis; /* 超出容器宽度时显示省略号 */
        cursor: pointer;
    }

    .ellipses-container:hover {
        overflow: visible; /* 鼠标悬停时显示全部内容 */
        white-space: normal;
    }
</style>
